<template>
  <div>
    <div>
      <span>业务统计</span>
      <div class="float-right d-flex">
        <el-radio-group v-model="type" size="mini" class="mr-3" @change="setOption">
          <el-radio-button :label="0">月计</el-radio-button>
          <el-radio-button :label="1">累计</el-radio-button>
        </el-radio-group>
        <el-date-picker
          v-model="year"
          align="right"
          type="year"
          format="yyyy年"
          :clearable="false"
          size="mini"
          style="width: 110px"
          placeholder="选择年"
          @change="getData"
        ></el-date-picker>
      </div>
    </div>
    <el-echarts :option="option" theme="green"></el-echarts>
  </div>
</template>
<script>
import { mockData } from '@/common/plugins/tools/common'

export default {
  components: {},
  props: {},
  data() {
    return {
      option: null,
      // 筛选
      type: 0,
      year: new Date(),
      // 图表数据
      xData: [],
      programData: [],
      programSumData: [],
      fundData: [],
      fundSumData: [],
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    getData() {
      this.xData = []
      this.programData = []
      this.programSumData = []
      this.fundData = []
      this.fundSumData = []

      let pSum = 0
      let fSum = 0
      const nYear = new Date().getFullYear()
      const sYear = this.year.getFullYear()
      for (let i = 1; i < 13; i++) {
        this.xData.push(`${i}月`)

        let pd = 0
        let fd = 0
        if (nYear > sYear || (nYear === sYear && new Date().getMonth() > i - 1)) {
          pd = mockData(2, 200)
          fd = mockData(0, 500)
        } else {
          pd = 0
          fd = 0
        }

        this.programData.push(pd)
        pSum += pd
        this.programSumData.push(pSum)

        this.fundData.push(fd)
        fSum += fd
        this.fundSumData.push(fSum)
      }

      this.setOption()
    },
    setOption() {
      this.option = {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['项目数', '审批金额'],
        },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        grid: {
          left: 50,
          right: 50,
          bottom: 20,
        },
        xAxis: [
          {
            type: 'category',
            data: this.xData,
            axisLabel: {
              interval: 0,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '项目数(个)',
          },
          {
            type: 'value',
            name: '金额(万元)',
          },
        ],
        series: [
          {
            name: '项目数',
            type: 'bar',
            barMaxWidth: 40,
            data: !this.type ? this.programData : this.programSumData,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' },
              ],
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }],
            },
          },
          {
            name: '审批金额',
            type: 'line',
            yAxisIndex: 1,
            data: !this.type ? this.fundData : this.fundSumData,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' },
              ],
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }],
            },
          },
        ],
      }
    },
  },
}
</script>
<style scoped></style>
